// rcc => React Class Component
// rfc => React Function Component
import React, { Component } from 'react'

export default class App extends Component {
  // 类继承的时候，如果子类有 constructor 就必须调用 super
  /* constructor() {
    super()
    // 定义状态
    // this => App 组件实例
    // state => 固定的，对应的值必须是一个对象
    // state 称为实例属性
    this.state = {
      list: [
        {
          id: 1,
          name: 'ifer',
          age: 18,
        },
        {
          id: 2,
          name: 'elser',
          age: 19,
        },
      ],
    }
  } */
  // 实例属性，和写到 constructor 中等价
  state = {
    list: [
      {
        id: 1,
        name: 'ifer',
        age: 18,
      },
      {
        id: 2,
        name: 'elser',
        age: 19,
      },
    ],
  }
  render() {
    const { list } = this.state
    // this => 实例
    // return <div>{this.state.list[0].name}</div>
    return (
      <ul>
        {list.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    )
  }
}
